<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../imgs/apple_logo.ico"/>
     <!-- 1. 引入bootstrap.css -->
     <link rel="stylesheet" href="../../plugins/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <title>商城购物车</title>

    <style>
        img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <!-- 导航begin -->
    <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="../RH/personal.html">苹果商城</a>
                    </div>
                    <div class="collapse navbar-collapse " id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">登录</a></li>
                            <li ><a href="../LJL/index.html">首页</a>
                            </li>
                            <li class="active"><a href="../RHW/cart.html">购物车</a></li>
                         
                            <li><a href="../RH/login.html" onclick="exit()">安全退出</a></li>
                            <li hidden>
                                <p  style="display: table-cell; vertical-align: middle; "><a href="../RH/personal.html"><img
                                            src="../../imgs/用户头像.png" style="width: 50px;height: 50px;border-radius: 50%;"
                                            class="img-responsive" alt=""></a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <div class="container-fluid">
        <div class="row">
            <div class="table-responsive">
                <table class="table">
                  <caption>我的购物车</caption>
                  <thead>
                    <tr>
                      <th><input type='checkbox' id="ck_all" onclick="select_all(this)"></th>
                      <th>序号</th>
                      <th>产品名称</th>
                      <th>产品图</th>
                      <th>产品单价</th>
                      <th>产品说明</th>
                      <th>操作选项</th>
                    </tr>
                  </thead>
                  <tbody id="cart">
                     
                  </tbody>
                </table>
              </div>
        </div>
    </div>

    <!-- 必须先引入jquery.min.js -->
    <!-- <script src="../plugins/jquery.min.js"></script> -->
    <script src="../../plugins/plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <!-- <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script> -->
    <script src="../../plugins/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    
    <script>
        function exit(){
            alert("成功退出")
        }
        $(function(){
            let json_str = localStorage.getItem("carts");
            //json字符串 - json对象
            let json_obj = JSON.parse(json_str);
            //数组
            let arr = json_obj.admin;
            //定义一个字符串
            let str = "";
            for(let i=0;i<arr.length;i++){
                str+="<tr>";
                str+="<td><input name='ck' type='checkbox'></td>";
                str+="<td>"+(i+1)+"</td>";
                str+="<td>"+arr[i].name+"</td>";
                str+="<td><img src='../LJL/imgs_index/"+arr[i].url+"'></td>";
                str+="<td>"+arr[i].price+"</td>";
                str+="<td>"+arr[i].desc+"</td>";
                str+="<td><button type='button' class='btn btn-link'>删除</button></td>";
                str+="/<tr>";
            }

            $("#cart").html(str);
           
        })


        //全选和全不选
        function select_all(obj){
            //获取下面所有的ck
            let arr = document.getElementsByName("ck");
            if(obj.checked){
                for(let i=0;i<arr.length;i++){
                    arr[i].checked = true;
                }
            }else{
                for(let i=0;i<arr.length;i++){
                    arr[i].checked = false;
                }
            }
        }
    </script>
</body>
</html>